<template>
 <div class="con">
  <!-- 返回箭头 -->
  <div class="back">
    <a href="search.html"><img src="img/left.jpg"/></a>
  </div>
  <!-- 搜索框 -->
  <div class="page__bd">
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

    <!-- 搜索显示 -->
    <div class="weui-cells searchbar-result" id="searchResult" style="display: block;">
      <ul>
      </ul>
    </div>    
  </div>

  <!-- 搜索结果 -->
  <div class="sResult">
    <ul>
      <li><a href="detail.html?id=1">
        <img src="img/sResult1.jpg">
        <div>
          <p class="name"> 坚果特产山核桃奶油味碧根</p>
          <p class="price">￥29.5 </p>
        </div>
      </a></li>
    </ul>
    <div class="di"></div>
  </div>
</div>
</template>

<script>
export default {
  ready:function(){
    var searchInput = document.querySelector("#searchInput");
    var searchUl = document.querySelector("#searchResult ul");

      searchInput.onkeyup=function(){
        shou(searchInput.value);
        searchUl.style.display="block";
      }
      shou()
      function shou(con){
        searchUl.innerHTML="";
        $.ajax({
            type:"GET",
          url: "https://suggest.taobao.com/sug?q="+con+"    &code=utf-8&callback=jsonp5",
          dataType: "jsonp",
          success: function(data){
            var arr =data.result;
            for(var i =0; i<arr.length;i++){  
              var a = document.createElement('a');
              var li = document.createElement('li');
              li.innerHTML=arr[i][0];
              li.appendChild(a);
              searchUl.appendChild(li);
              li.className="searchLi";
              li.onclick=function(){
                window.location.href="sResult.html"; 
              }
            }
          }
        });
      }
    }
}

</script>

<style scoped>
.di{
  padding: 0.26rem;
}
#searchResult{
  margin-top: 0; 
}
#searchResult ul{
  display: none;
  padding: 0.05rem 0.2rem;
}
#searchResult li{
  color: red!important;
  width: 100%;
  height: 0.3rem;
  border: 1px red solid;
} 
.con .back a{
  position: fixed;
  width: 5%;
  top: 0.12rem;
  left: 0.05rem;
  z-index: 1222;
}
.con .back img{
  width: 100%;
}
/*.left_img{
  position: absolute;
  display: inline-block;
  width: 3%;
  left: 3%;
}
.left_img img{
  width: 100%;
}*/
.con .weui-search-bar{
  background-color: #f2f2f2;
}
.con .sResult{
  width: 100%;
}
.con .sResult li{
  height: 9%;
  padding: 0.1rem 0.1rem 0.05rem 0.1rem;
  border-bottom: 1px solid #f2f2f2;
}
.con .sResult li img{
  width: 25%;
}
.con .sResult li div{
  width: 65%;
  display: inline-block;
  padding-left: 2%; 
  /*border: 1px yellow solid;*/
}
.con .sResult li .name{
  /*border: 1px blue solid;*/
  font-size: 0.15rem;
  color: black;
}
.con .sResult li .price{
  /*border: 1px blue solid;*/
  font-size: 0.15rem;
  color: red;
  margin-top: 3%;
}
#searchResult{
  margin-top: 0; 
}
</style>
